<template>
    <!-- This example requires Tailwind CSS v2.0+ -->
<nav class="bg-gray-800 fixed w-full z-40 h-16 box-border left-0 top-0">
  <div class="max-w-9xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="relative flex items-center justify-between h-16">
      <div class="absolute inset-y-0 left-0  flex items-center ">
        <!-- Mobile menu button-->
        <button @click="slideLeft" for="my-drawer"  type="button" class="inline-flex items-center justify-center   rounded-md text-gray-300  " aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          
        </button>
      </div>
      <div class="flex-1 flex  items-stretch justify-start">
        <!-- logo -->
        <div class="flex-shrink-0 flex items-center" v-if="!showSearch">
        <div class="w-8"></div>
        <a href="/" class="block text-gray-300 h-6 items-center justify-center">
         <svg t="1641019653289" class="inline-block w-6 h-6 stroke-current" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2050" width="200" height="200"><path d="M512 512m-298.7 0a298.7 298.7 0 1 0 597.4 0 298.7 298.7 0 1 0-597.4 0Z" fill="#009F72" p-id="2051"></path><path d="M654.2 170.7m-85.3 0a85.3 85.3 0 1 0 170.6 0 85.3 85.3 0 1 0-170.6 0Z" fill="#F9DB88" p-id="2052"></path><path d="M862.9 427.8l-168.8-39c-0.4-0.1-0.7-0.3-0.9-0.6l-67.5-92.9c-0.7-16-6.8-31.8-18.4-44.5-26.4-29.1-71.4-31.2-100.4-4.8L350.4 388.3c-29.1 26.4-31.2 71.4-4.8 100.4 1.5 1.6 3 3.2 4.6 4.6 1 0.9 0.4 2.5-0.9 2.6L147.6 512c-11.8 0.9-20.5 11.2-19.6 23 0.9 11.2 10.2 19.6 21.2 19.6 0.6 0 1.2 0 1.7-0.1l263.4-21.1c0.3 0 0.7 0.1 0.9 0.2l95.6 61.5c0.8 0.5 0.9 1.5 0.3 2.2l-99.9 119.9c-5.6 6.7-9.3 14.3-11.4 22.2-0.2 0.9-1.1 1.4-2 1.1l-194.2-68.9c-29.6-10.5-62.1 5-72.6 34.6-10.5 29.6 5 62.1 34.6 72.6l440.9 156.4c6.1 2.2 12.5 3.3 19 3.3H696c31.3 0 57.3-24.9 57.7-56.1 0.4-31.8-25.2-57.6-56.9-57.6h-61.3l-125.8-44.6c-1-0.3-1.3-1.6-0.7-2.4l132-158.3c10.4-12.5 15-28.9 12.5-45.1-2.5-16.1-11.8-30.4-25.5-39.2l-22.3-14.3c-1.2-0.8-0.7-2.6 0.7-2.8l199.3-15.9h0.5l37.5 8.7c3.2 0.8 6.5 1.1 9.6 1.1 19.4 0 37-13.4 41.5-33.1 5.4-22.9-8.9-45.8-31.9-51.1z m-320.5 52.4l-46.2-29.7c-0.8-0.5-0.9-1.7-0.2-2.4l80.2-72.9c0.7-0.6 1.7-0.5 2.2 0.2l55.5 76.3c6 8.3 14.9 14.2 24.9 16.5 1.7 0.4 1.5 2.8-0.2 3l-115.3 9.2c-0.3 0-0.6 0-0.9-0.2z" fill="#F9DB88" p-id="2053"></path></svg>
           <span class="inline-block">   SnoGoGo</span>
        </a> 
        </div>
         
        <!-- 搜索框  -->
        <div class="w-full pl-8 pr-2" v-if="showSearch">
           <!-- <div @click="doShowSearch" class="inline-block text-white h-8 items-center justify-center">
          <svg t="1641112795427" class="inline-block w-8 h-8 stroke-current" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10505" width="200" height="200"><path d="M510.65 963C264.6 963 63.3 761.26 63.3 514.7S264.6 66.41 510.65 66.41 958 268.14 958 514.7 756.69 963 510.65 963zM655 858.61a377.28 377.28 0 0 0 198.65-199.12 371.82 371.82 0 0 0 0-289.58A377.18 377.18 0 0 0 655 170.79a369.15 369.15 0 0 0-288.64 0 377.09 377.09 0 0 0-198.71 199.12 371.82 371.82 0 0 0 0 289.58A377.12 377.12 0 0 0 366.33 858.6a369.21 369.21 0 0 0 288.64 0z" fill="#dbdbdb" p-id="10506"></path><path d="M287.806909 685.824011m26.516505-26.516504l349.31075-349.31075q26.516504-26.516504 53.033008 0l0 0q26.516504 26.516504 0 53.033008l-349.31075 349.31075q-26.516504 26.516504-53.033008 0l0 0q-26.516504-26.516504 0-53.033008Z" fill="#dbdbdb" p-id="10507"></path><path d="M686.881618 742.132969m-26.516505-26.516504l-349.31075-349.31075q-26.516504-26.516504 0-53.033008l0 0q26.516504-26.516504 53.033009 0l349.31075 349.310749q26.516504 26.516504 0 53.033009l0 0q-26.516504 26.516504-53.033009 0Z" fill="#dbdbdb" p-id="10508"></path></svg>
        </div>  -->
          <ul role="list" class="border-b border-gray-600">
                            <li class=" flex items-center justify-between text-sm">
                            <div class="w-0 flex-1 flex items-center">

                               
                                <span class=" flex-1 w-0 truncate">
                                   <form action="/search" method="get">
                                      <input name="term" type="search" style="outline:0px;" placeholder="Search resorts, regions, pass programs, articles etc." class=" m-0 bg-gray-800 w-full h-10  text-gray-200" />
                                   </form>
                                </span>
                            </div>
                            <div class="ml-4 flex-shrink-0">
                                <a @click="doShowSearch"  class="font-medium tooltip tooltip-bottom " data-tip="Cancel Search">
                                  <svg t="1643184974311" class="inline-block w-4 h-4 text-gray-200" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16811" width="200" height="200"><path d="M953.6 0L1024 73.856 583.808 523.008l418.56 427.136L930.944 1024 512 596.352 93.056 1024l-70.4-73.856L440.448 523.52 0 73.856 71.424 0l440.96 450.176L953.472 0z" p-id="16812" fill="#bfbfbf"></path></svg>
                                </a> 
                            </div>
                            </li>
                             
                        </ul>
        </div>
        <!-- 搜索框End -->
      </div>
      <div v-if="!showSearch" class="absolute inset-y-0 right-0 flex items-center  sm:static sm:inset-auto sm:ml-6 ">
       
               
          <button @click="doShowSearch" type="button" class="bg-gray-800  rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white margin-e">
          <span class="sr-only">Search</span>
          <!-- Heroicon name: outline/bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
        </button>

       <!-- 登录后的信息 -->
        <div class="inline-block" v-if="$store.state.user && $store.state.user.uid">
         

         <label :for="$store.state.user.uid>0?'my-modal-topic':'SnogogologinBox'" type="button" class="bg-gray-800  ml-2 text-gray-400 ">
          <span class="sr-only">New Topic</span>
          <!-- Heroicon name: outline/bell -->
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6  stroke-current">   
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
        </svg> 
        </label>
        </div>
         <a href="/dashboard/notifications"  v-if="$store.state.user && $store.state.user.uid" type="button" class="bg-gray-800 p-2  rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white indicator">
          <span class="sr-only">View notifications</span>
          <div class="indicator-item  badge badge-error" style="top:4px; right:4px" v-if="$store.state.user.noti_count">{{$store.state.user.noti_count}}</div> 
          <!-- Heroicon name: outline/bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </a>
        
        <!-- Profile dropdown -->
        <div class="ml-1 relative" v-if="$store.state.user && $store.state.user.uid">
          <div>
            <button @click="showUserMenu" type="button" class="  flex   rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white indicator" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              
               <!-- <img class="h-8 w-8 rounded-full" src="" alt=""> -->
              <div class="avatar" v-if="$store.state.user.picture"><div class="rounded-full w-6 h-6 shadow ring ring-gray-700" ><img  :src="$store.state.user.picture"></div></div>
              <div class="avatar placeholder" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-6 h-6  " :style="'background-color:'+ $store.state.user['icon:bgColor']"><span>{{$store.state.user['icon:text']}}</span></div></div> 
                       
            </button>
          </div>
 
          <div  @click="showUserMenu" v-if="userMenu" class="origin-top-right absolute right-0 mt-2 w-48 z-50  rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <!-- Active: "bg-gray-100", Not Active: "" -->
            <a :href="'/uid/'+$store.state.user.uid" class="block px-4 py-2   text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="/dashboard/posts" class="block px-4 py-2   text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a   @click="logout" class="block px-4 py-2   text-gray-700 cursor-pointer" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div>
        </div>

         <!-- 没有登录后的信息 -->
         <label  v-if="!$store.state.user.uid" for="SnogogologinBox"  class="block px-2 py-2 text-white focus:outline-none" >
           <svg t="1644651997543" class="h-6 w-6" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2047" width="200" height="200"><path d="M511.333 63.333c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448z m0 832c-51.868 0-102.15-10.144-149.451-30.15-36.011-15.231-69.123-35.67-98.812-60.897 12.177-31.985 42.226-63.875 84.223-88.903C396.189 686.243 456.222 669.53 512 669.53c55.631 0 115.416 16.658 164.026 45.703 41.762 24.953 71.689 56.812 83.863 88.804-29.764 25.342-62.976 45.865-99.106 61.146-47.299 20.006-97.582 30.15-149.45 30.15z m296.268-139.658c-20.493-35.937-54.353-68.855-98.747-95.381C649.75 624.979 579.839 605.53 512 605.53c-67.964 0-138.094 19.488-197.471 54.875-44.644 26.606-78.656 59.594-99.195 95.586-23.835-28.755-43.234-60.652-57.85-95.208-20.006-47.3-30.15-97.583-30.15-149.451s10.144-102.15 30.15-149.451c19.337-45.719 47.034-86.792 82.321-122.078 35.286-35.287 76.359-62.983 122.078-82.321 47.3-20.006 97.583-30.15 149.451-30.15 51.868 0 102.15 10.144 149.451 30.15 45.719 19.337 86.792 47.034 122.078 82.321 35.287 35.286 62.983 76.359 82.321 122.078 20.006 47.3 30.15 97.583 30.15 149.451s-10.144 102.15-30.15 149.451c-14.563 34.429-33.869 66.22-57.583 94.892z" fill="#cdcdcd" p-id="2048"></path><path d="M512 220.223c-88.224 0-160 71.776-160 160s71.776 160 160 160c88.225 0 160-71.775 160-160s-71.775-160-160-160z m0 256c-52.935 0-96-43.065-96-96s43.065-96 96-96 96 43.065 96 96-43.065 96-96 96z" fill="#cdcdcd" p-id="2049"></path></svg>
         </label>

         
       
      </div>
    </div>
  </div>


</nav>
</template>
<script>
export default {
//  props: ['slideTpye','pl'],
   props: {
    event: {
      type: Object,
      default: () => {},
    } 
  },
 data() {
    return {
         showSearch:false,
         userMenu:false
    }
},
async mounted() {
      
      
      
  },
 methods: {
     slideLeft(){
       //console.log("showBigSlideMenu")
       this.$emit('showBigSlideMenu');
     },
     showUserMenu(){
        this.userMenu = !this.userMenu;
     },
      doShowSearch(){
        this.showSearch = !this.showSearch;
     },
     async logout(){
       
       let data = this.$store.state.data;
      //  //console.log("data:",data)
       let  res = await  this.$axios.get("snogogo_nuxt/api/logout");
       //console.log("res:",res)
       if(res.code>0 || typeof(res.code)=='string' ){
          this.$tools.alert("error",res.code+":"+res.msg);
          return;
        }
        // //console.log(" this.user:", this.$store.state)
        let user = {uid:0}
        this.$store.commit("SET_USER",user)
     },
     
   }
}
</script>